/*
 * @Description: 弹窗组件
 * @Author: shuaishuai.wang
 * @Date: 2019-10-12 14:20:20
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-10-12 16:45:16
 */
 <template>
  <div
    class="mask"
    v-show="showState"
  >
    <div class="popup_area">
      <h3>{{info.title}}</h3>
      <p
        v-show="info.msg"
        class="pupop_msg fontsize28"
      >{{info.msg}}</p>
      <p
        v-show="info.remark"
        class="popup_remark fontsize28"
        v-for="(remark, index) in info.remark"
        :key="index"
      >{{index|textFil(remark)}}{{remark}}</p>
      <div class="btn_area flex-h flex-hsb fontsize32">
        <div
          class="btn_left"
          v-show="info.btnLeft"
          @click="cancelFun"
        >{{info.btnLeft}}</div>
        <div
          class="btn_right"
          v-show="info.btnRight"
          :class="info.btnLeft ? 'btn_double_right' : ''"
          @click="confirmFun"
        >{{info.btnRight}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showState: false,
    info: {
      title: '提示',
      msg: '',
      remark: [],
      btnLeft: '取消',
      btnRight: '确认'
    }
  },
  methods: {
    cancelFun() { // 左侧按钮点击事件
      this.$emit('cancelFun')
    },
    confirmFun() { // 右侧按钮点击事件
      this.$emit('confirmFun')
    }
  },
  filters: {
    textFil(val, remark) { // 解决办法四个字的显示
      if (val === 1 && remark !== '') {
        return '解决办法：'
      }
    }
  }
}
</script>

 <style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  z-index: 90;
  .popup_area {
    width: 540px;
    height: fit-content;
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px; /*no*/
    text-align: center;
    h3 {
      color: #000;
      padding-top: 32px;
      font-size: 36px;
    }
    .pupop_msg {
      color: #333;
      padding: 32px;
      word-wrap: break-word;
      word-break: break-all;
    }
    .btn_area {
      border-top: 1px solid #999;
      div {
        width: 100%;
        padding: 20px 0;
        color: #333;
      }
      .btn_right {
        color: #027aff;
      }
      .btn_double_right {
        border-left: 1px solid #999;
      }
    }
    .popup_remark {
      margin: 32px;
      text-align: left;
      color: #666666;
    }
  }
}
</style>
